<include file="public@header"/>
<style>
    .cas-thumbnail {
        width: 80px;
        height: 80px;
    }

    .table td, .table th {
        text-align: center;;
    }

    .js-add-to-order-btn {
        cursor: pointer;
    }
</style>
</head>
<body>
<div class="wrap js-check-wrap">
    <form class="well form-inline" method="post" action="">
        CAS：
        <input type="text" class="form-control" name="cas" style="width:100px;" value="{:input('param.cas')}"
               placeholder="请输入CAS">
        关键字：
        <input type="text" class="form-control" name="keyword" style="width: 200px;" value="{:input('param.keyword')}"
               placeholder="请输入化合物名称/分子式">
        <input type="submit" class="btn btn-primary" value="搜索"/>
        <a class="btn btn-danger" href="{:url('AdminProduct/select')}?order_draft_id={$order_draft_id}">清空</a>
    </form>
    <form class="js-ajax-form" action="" method="post">
        <table class="table table-hover table-bordered table-list">
            <thead>
            <tr>
                <th width="100">CAS号</th>
                <th>名称</th>
                <th width="130">品牌</th>
                <th>包装规格</th>
                <th>价格/元</th>
                <th width="70">库存量</th>
                <th>备货期/天</th>
                <th width="100">{:lang('ACTIONS')}</th>
            </tr>
            </thead>
            <php>
                $status=array("1"=>"上架","0"=>"下架");
                $top_status=array("1"=>"置顶","0"=>"");
                $recommend_status=array("1"=>"推荐","0"=>"");
            </php>
            <foreach name="products" item="vo">
                <php>
                    $packs_count=count($vo['packs']);
                    $rowspan=$packs_count>0?$packs_count+1:2;
                </php>
                <if condition="$packs_count gt 0">
                    <tr>
                        <td rowspan="{$rowspan}">{$vo.cas}</td>
                        <td rowspan="{$rowspan}">{$vo.name}</td>
                    </tr>
                    <foreach name="vo.packs" item="pack" index="pack_index">
                        <tr>
                            <td>{$pack.brand}</td>
                            <td>{$pack.pack}{$pack.unit}</td>
                            <td>{$pack.price}</td>
                            <td>{$pack.inventory}</td>
                            <td>{$pack.lead_time}</td>
                            <td>
                                <if condition="empty($order_draft_items['chem_product_pack'.$pack['id']]['goods_quantity'])">
                                    <input class="form-control input-sm text-center js-add-to-order-input" value="1"
                                           data-pack="{$pack.id}">
                                    <else/>
                                    <input class="form-control input-sm text-center js-add-to-order-input" value="{$order_draft_items['chem_product_pack'.$pack['id']]['goods_quantity']}"
                                           data-pack="{$pack.id}">
                                </if>
                                <a class="js-add-to-order-btn" data-pack="{$pack.id}">添加</a>
                            </td>
                        </tr>
                    </foreach>
                    <else/>
                    <tr>
                        <td>{$vo.cas}</td>
                        <td>{$vo.name}</td>
                        <td colspan="6">暂无库存</td>
                    </tr>
                </if>
            </foreach>
        </table>
        <ul class="pagination">{$page}</ul>
    </form>
</div>
<img id="cas-thumbnail-bigger"
     style="position: fixed;top: 50%;left: 50%;width: 300px;height: 300px;margin-left: -150px;margin-top: -150px;display: none;box-shadow: 0px 0px 20px rgba(0,0,0,0.2);"/>
<script src="__STATIC__/js/admin.js"></script>
<script>
    Wind.use('noty3', function () {

    });
    $(function () {
        var $cas_thumbnail_bigger = $('#cas-thumbnail-bigger');
        $('.cas-thumbnail').hover(function () {
            $cas_thumbnail_bigger.attr('src', $(this).attr('src'));
            $cas_thumbnail_bigger.show();
        }, function () {
            $cas_thumbnail_bigger.hide();
        });

        $('.js-add-to-order-btn').click(function () {
            var $this    = $(this);
            var $input   = $this.siblings('input');
            var quantity = $input.val();
            var packId   = $this.data('pack');

            addToOrderDraft(quantity, packId);

        });

        $('.js-add-to-order-input').keydown(function (e) {
            if (e.keyCode == 13) {
                var $this    = $(this);
                var quantity = $this.val();
                var packId   = $this.data('pack');

                addToOrderDraft(quantity, packId);
            }
        });


    });

    function addToOrderDraft(quantity, packId) {
        $.ajax({
            url: "{:url('chem/AdminProduct/addToOrderDraft')}",
            type: "post",
            dataType: 'json',
            data: {order_draft_id: '{$order_draft_id}', quantity: quantity, pack_id: packId},
            success: function (data) {
                if (data.code == 1) {
                    new Noty({
                        text: data.msg,
                        type: 'success',
                        layout: 'topCenter',
                        animation: {
                            open: 'animated bounceInDown', // Animate.css class names
                            close: 'animated bounceOutUp', // Animate.css class names
                        },
                        callbacks: {
                            afterClose: function () {
                            }
                        }
                    }).show();
                }
                if (data.code == 0) {
                    new Noty({
                        text: data.msg,
                        type: 'error',
                        layout: 'topCenter',
                        animation: {
                            open: 'animated bounceInDown', // Animate.css class names
                            close: 'animated bounceOutUp', // Animate.css class names
                        },
                        callbacks: {
                            afterClose: function () {
                            }
                        }
                    }).show();
                }
            },
            error: function () {

            },
            complete: function () {

            }

        });
    }

</script>
</body>
</html>